<template>
    <div class="">
        <!-- 下载界面 -->
        <el-dialog v-dialogDrag :visible.sync="downloadDialogVisible" width="476px" :close-on-click-modal="false" :append-to-body="true" @close="close_timer()">
            <svg-icon class="dialogclose" @click="close_timer()" icon-file-name="close" />
            <div class="bjimg">
                <div style="">
                    <p class="xiazai" style="position: relative; top: 15px; left: 0px">正在下载</p>
                    <p class="mb">{{ dsize_MB }}MB/{{ asize_MB }}MB</p>
                    <el-progress :percentage="percentage ? percentage : 0"></el-progress>
                </div>
                <div style="margin-top: 20px">
                    <p class="xiazai" style="margin-bottom: 5px">总进度</p>
                    <el-progress :percentage="percentage ? percentage : 0"></el-progress>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  props: {},
  created () { },
  data () {
    return {
      downloadDialogVisible: false,//游戏下载弹窗
      asize_MB: '', //总下载大小MB
      dsize_MB: '', //已下载大小MB
      percentage: 0,
      timer: null,//游戏下载计时器
      status: '',
    }
  },
  mounted () { },
  methods: {
    // 下载游戏
    downloadGame (data) {
      var that = this
      var hoststatic = box_info.m_dym_gm_static
      const Gameurl = hoststatic + data.loginBoxUrl
      that.downloadDialogVisible = true
      game.download(data.id, Gameurl, function (result) {
        console.log(result.result, '下载游戏');
        console.log(result, '下载游戏');
        if (result.result === true) {
          console.log('下载开始');
          that.timer = setInterval(() => {
            var ress = game.download_info
            that.percentage = Math.round((ress.dsize / ress.asize) * 100)
            that.asize_MB = Math.round(ress.asize / 1024 / 1024)
            that.dsize_MB = Math.round(ress.dsize / 1024 / 1024)
            that.status = ress.status
            if (ress.status === 2) {
              clearTimeout(that.timer)
              that.status = ress.status
              that.downloadDialogVisible = false
              that.$parent.startGame()
            }
            if (ress.status === 3) {
              clearTimeout(that.timer)
              that.status = ress.status
            }
          }, 100)
        } else {
          alert(result.msg)
        }
      })
    },
    close_timer () {
      clearInterval(this.timer)
      this.downloadDialogVisible = false
      game.download_close()
      this.percentage = 0
    },
  },
  computed: {},
  watch: {},
  components: {},
}
</script>

<style scoped lang='less'>
/deep/.el-dialog {
    background: url(@/assets/user/bj-img.png) no-repeat !important;
}
/deep/ .el-dialog__header {
    display: none;
}
/deep/ .el-dialog__body {
    height: 356px !important;
    padding: 45px 30px 30px !important;
    background: transparent !important;
    border: 1.5px solid #b4875c;
    background: url('@/assets/user/bj-img.png') no-repeat;
}
/deep/.el-progress-bar__outer {
    width: 393px !important;
    height: 17px !important;
    background: #000000 !important;
    border-radius: 4px !important;
}
/deep/.el-progress-bar__inner {
    height: 17px !important;
    color: transparent;
    background: linear-gradient(270deg, #00ff08 99%, #008004) !important;
    border-radius: 4px !important;
}
/deep/.el-progress__text {
    position: absolute;
    top: -18px;
    right: 0px;
    color: #c5a27d !important;
    font-family: '微软雅黑';
}
.dialogclose {
    position: relative;
    top: -32px;
    left: 408px;
    color: #fff;
    font-size: 19px;
    z-index: 9999;
    cursor: pointer;
    &:hover {
        color: red;
    }
}
.bjimg {
    padding: 154px 10px 0 10px;
}
.xiazai {
    font-size: 13px;
    font-family: '微软雅黑';
    text-align: left;
    color: #ffffff;
}
.mb {
    position: relative;
    top: -2px;
    font-size: 12px;
    left: 280px;
    color: #c5a27d;
    font-family: '微软雅黑';
}
</style>
